import {Layout, Menu} from 'antd';
import React, {useEffect, useState} from 'react';
import Predict from "./predict.tsx";
import HistoryDataPage from "./history.tsx";
import RecommendPage from "./recommend.tsx";
import {loadAttributes, loadCities} from "./utils/http.ts";
import useApp from "antd/es/app/useApp";

const {Header, Content} = Layout;

const items = [
    {
        "key": "history",
        "label": "历史趋势"
    },
    {
        "key": "predict",
        "label": "趋势预测"
    },
    {
        "key": "recommend",
        "label": "服装推荐"
    }]


function MyApp() {
    const [menuKey, setMenuKey] = React.useState<string>('history');
    const [cities, setCities] = useState<string[]>([]);
    const [attributes, setAttributes] = useState<string[]>([]);
    const [currentCity, setCurrentCity] = useState<string>("");
    const {message} = useApp()

    const handleLoadCities = async () => {
        const res: any = await loadCities()
        if (res) {
            setCities(res.map((item: string) => ({
                "value": item,
                "label": item,
            })));
        } else {
            message.error('无法加载城市列表');
        }
    };

    const handleLoadAttributes = async (cityName: string) => {
        try {
            const res: any = await loadAttributes(cityName);
            if (res) {
                setAttributes(res.map((item: string) => ({
                    "value": item,
                    "label": item,
                })));
            } else {
                message.error('无法加载属性列表');
            }
        } catch (error) {
            message.error('加载属性列表时发生错误');
        }
    };

    useEffect(() => {
        handleLoadCities();
    }, []);

    useEffect(() => {
        if (currentCity) {
            handleLoadAttributes(currentCity);
        }
    }, [currentCity]);

    // 根据 menuKey 渲染不同的内容
    const renderContent = (menuKey: string) => {
        switch (menuKey) {
            case 'history':
                return <HistoryDataPage cities={cities} setCurrentCity={setCurrentCity} attributes={attributes}/>;
            case 'predict':
                return <Predict cities={cities} setCurrentCity={setCurrentCity} attributes={attributes}/>
            case 'recommend':
                return <RecommendPage  cities={cities} setCurrentCity={setCurrentCity}/>;
            default:
                return <div>404</div>;
        }
    };

    return (<Layout>
        <Header
            style={{
                position: 'sticky', top: 0, zIndex: 1, width: '100%', display: 'flex', alignItems: 'center',
            }}
        >
            <Menu
                theme="dark"
                mode="horizontal"
                defaultSelectedKeys={[menuKey]}
                items={items}
                style={{flex: 1, minWidth: 0}}
                onClick={(e: any) => {
                    console.log(e.key);
                    setMenuKey(e.key);
                }}
            />
        </Header>
        <Content>
            {renderContent(menuKey)}
        </Content>
    </Layout>)
}


export default MyApp;